/**
 * @desc 菜单新增组件
 */
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { Form, Space, Button, Input, Radio } from "antd";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import "./style/style.less"
import "@/font/iconfont.css"
import iconData from "@/utils/iconData"
import { apiAdd } from "@/request/system/menu"
import { statusOptions, LevelOptions } from "../js/data"

const Item = Form.Item;

class MenuAdd extends Component {
    state = {
        iconStatus: false,
        iconValue: '',
        loading: false
    };
    /**
     * @desc 新增菜单
     * @params object 表单数据
     * */
    onFinish = value => {
        this.setState({ loading: true })
        value.menuParentId = this.props.nowRowData.storeMenuId;
        apiAdd(value).then(res => {
            if (res.code === 0) {
                React.$message({
                    type: 'success',
                    content: '新增成功'
                })
                this.props.getList();
                this.props.handleCancel();
            }
            this.setState({ loading: false }, () => {
                React.$post('/management/sysStoreMenu/getMenusListByUserId').then(res => {
                    sessionStorage.setItem('menuList', JSON.stringify(res.data.menus))
                    // window.location.reload()
                })
            })
        }).catch(e => {
            this.setState({ loading: false })
        })
    };

    /**
     *@desc 图标下拉事件
     * */
    iconHandler = () => {
        this.setState({ iconStatus: !this.state.iconStatus })
    }
    /**
     *@desc 图标选中事件
     * */
    iconChange = (val) => {
        this.formRef.setFieldsValue({ menuIcon: val });
        this.setState({
            iconStatus: !this.state.iconStatus,
            iconValue: val
        });
    }

    render() {
        const { handleCancel, nowRowData } = this.props;
        const { iconStatus, iconValue, loading } = this.state;
        let iconsData = iconData.map((v, i) => (
            <div className='p-menu-item' key={i} >
                <span className={[`iconfont ${v}`]} onClick={() => this.iconChange(v)} />
            </div>
        ))
        iconsData.push(<div className='p-menu-item' >
            <span className={[`iconfont`]} onClick={() => this.iconChange(' ')} >空</span>
        </div>)
        return (
            <Form
                ref={(ref) => {
                    this.formRef = ref
                }}
                labelCol={{ span: 6 }}
                onFinish={this.onFinish}
                wrapperCol={{ span: 16 }}
                initialValues={{
                    status: 'Y',
                    menuLevel: nowRowData.menuLevel + 1,
                    menuAreaCode: nowRowData.menuAreaCode
                }}>
                <Item name="menuName" rules={[{ required: true, message: "请输入菜单名称" }]} label="菜单名称">
                    <React.FormInput placeholder={'请输入菜单名称'} />
                </Item>
                <Item name="menuLevel" rules={[{ required: true, message: "请选择菜单等级" }]} label="菜单等级">
                    <React.FormSelect options={LevelOptions} disabled placeholder={'请选择菜单等级'} />
                </Item>
                <Item name="menuUrl" rules={[{ required: true, message: "请输入路由名称" }]} label="路由名称">
                    <React.FormInput placeholder={'请输入路由名称'} />
                </Item>
                {
                    //一级菜单不显示 路由名称和菜单位置
                    nowRowData.menuLevel > 0 &&
                    <>
                        <Item name="menuComponent" rules={[{ required: true, message: "请输入菜单位置" }]} label="菜单位置">
                            <React.FormInput placeholder={'请输入菜单位置'} />
                        </Item>
                    </>
                }
                <Item name="menuIcon" rules={[{ required: true, message: "请输入菜单图标" }]} label="菜单图标">
                    <div className='p-menu-box'>
                        <div className='p-menu-input' onClick={this.iconHandler}>
                            {
                                iconValue !== '' && <span className={[`iconfont ${iconValue}`]} />
                            }

                        </div>
                        {
                            iconStatus && <div className='p-menu-list'>
                                {iconsData}
                            </div>
                        }
                    </div>
                </Item>
                <Item name="status" rules={[{ required: true, message: "请选择菜单状态" }]} label="菜单状态">
                    <Radio.Group value={'Y'} options={statusOptions} />
                </Item>
                <Item name="sorted" label="菜单序号">
                    <Input type='number' />
                </Item>
                <div className="p-text-align">
                    <Space size="large">
                        <Button key="back" onClick={handleCancel}>
                            取 消
                        </Button>
                        <Button loading={loading} type="primary" htmlType="primary">
                            确 定
                        </Button>
                    </Space>
                </div>
            </Form>
        );
    }
}

MenuAdd.propTypes = {
    dialogType: PropTypes.string,
    handleCancel: PropTypes.func,
    nowRowData: PropTypes.object
};
MenuAdd.defaultProps = {};
const mapStateToProps = state => {
    return {};
};
const mapDispatchToProps = dispatch => {
    return {};
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(MenuAdd));
